import React, {FC, useEffect} from 'react'
import {Form, Row, Col, Input} from 'antd'
import styles from './index.less'
import {PageType} from '../constant'

const {TextArea} = Input
interface BankCardType {
	bankCardForm: any
	pageType: string
	detailRecord?: Record<string, string>
}

const bankCard: FC<BankCardType> = ({bankCardForm, pageType, detailRecord}) => {
	const initForm = () => {
		if (pageType !== PageType.add && detailRecord) {
			const obj = {
				bankName: detailRecord.bankName,
				bankCardNo: detailRecord.bankCardNo,
				depositBank: detailRecord.depositBank,
			}
			bankCardForm.setFieldsValue(obj)
		}
	}

	useEffect(() => {
		initForm()
	}, [detailRecord])

	return (
		<div className={styles.bankCard}>
			<div className={styles.titleBox}>银行卡信息</div>
			<div style={{padding: '12px 0'}}>
				<Form
					layout="horizontal"
					labelCol={{flex: '140px'}}
					labelAlign="right"
					labelWrap
					autoComplete="off"
					name="CreditInformationFrom"
					form={bankCardForm}
					disabled={pageType === PageType.detail}>
					<Row>
						<Col span={8}>
							<Form.Item
								name="bankName"
								label="银行名称"
								rules={[{required: true, max: 30}]}>
								<TextArea
									placeholder={
										pageType === PageType.detail
											? ''
											: '请输入'
									}
									autoSize
								/>
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								name="bankCardNo"
								label="银行卡号"
								rules={[{required: true, max: 30}]}>
								<TextArea
									placeholder={
										pageType === PageType.detail
											? ''
											: '请输入'
									}
									autoSize
								/>
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								name="depositBank"
								label="开户行名称"
								rules={[{required: true, max: 30}]}>
								<TextArea
									placeholder={
										pageType === PageType.detail
											? ''
											: '请输入'
									}
									autoSize
								/>
							</Form.Item>
						</Col>
					</Row>
				</Form>
			</div>
		</div>
	)
}

export default bankCard
